<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone content演示(surprise皮肤/响应式)_素材火</title>

<style>
body { overflow-x: hidden; }
#containingDiv { width: 960px; margin: 0 auto; }
@media screen and (min-width:1200px) {
  #containingDiv { width: 960px; margin: 0 auto; }
}
@media screen and (max-width:767px) {
  #containingDiv { width: 100%; margin: 0 auto; }
}
</style>

<link href="css/allinone_contentSlider.css" rel="stylesheet" type="text/css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_contentSlider.js" type="text/javascript"></script>

<script>
$(function() {
	$('#allinone_contentSlider_surprise').allinone_contentSlider({
		skin: 'surprise',
		responsive:true,
		width: 960,
		height: 384,
		autoHideBottomNav:false,
		showPreviewThumbs:false,
		autoHideNavArrows:false
	});
});
</script>
</head>

<body>
<h1>allinone content演示(surprise皮肤/响应式)</h1>

<!-- 代码开始 -->
<div style="background-color: #7A337F;">
	<div id="containingDiv">
		<div id="allinone_contentSlider_surprise"> 
			<ul class="allinone_contentSlider_list">
				<li data-text-id="#allinone_contentSlider_photoText1"></li>
				<li data-text-id="#allinone_contentSlider_photoText2"></li>
				<li data-text-id="#allinone_contentSlider_photoText3"></li>
				<li  data-text-id="#allinone_contentSlider_photoText6"></li>
			</ul>
			
			<div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts">
				<div class="allinone_contentSlider_text_line" data-initial-left="150" data-initial-top="10" data-final-left="30" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="images/surprise/surprise1.png" width="444" height="364" alt=""/></div>
				<div class="allinone_contentSlider_text_line textElement11_surprise" data-initial-left="0" data-initial-top="25" data-final-left="380" data-final-top="25" data-duration="0.5" data-fade-start="0" data-delay="0.3"><span style="color:#FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div>
				<div class="allinone_contentSlider_text_line textElement12_surprise" data-initial-left="0" data-initial-top="50" data-final-left="378" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.5"><span style="color:#FFFFFF;">Et harum quidem <br />
					rerum facilis</span></div>
				<div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="180" data-final-left="420" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.5"><span style="color:#FFFFFF;">Temporibus autem quibusdam et aut officiis debitis<br />
					aut rerum necessitatibus saepe eveniet ut et voluptates</span></div>
				<div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="230" data-final-left="420" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="0.7"><span style="color:#FFFFFF;">Itaque earum rerum hic tenetur a sapiente</span></div>
				<div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="170" data-final-left="380" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.9"><img src="images/surprise/listIcon.png" width="28" height="26" alt=""/></div>
				<div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="220" data-final-left="380" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="images/surprise/listIcon.png" width="28" height="26" alt=""/></div>
				<div  class="allinone_contentSlider_text_line" data-initial-left="730" data-initial-top="90" data-final-left="710" data-final-top="90" data-duration="1.7" data-fade-start="0" data-delay="2.5"><img src="images/surprise/surprise2.png" width="209" height="335" alt=""/></div>
			</div>
			<div id="allinone_contentSlider_photoText2" class="allinone_contentSlider_texts">
				<div class="allinone_contentSlider_text_line" data-initial-left="150" data-initial-top="35" data-final-left="270" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="images/surprise/surprise22.png" width="650" height="367" border="0" alt=""/></div>
				<div class="allinone_contentSlider_text_line textElement22_surprise" data-initial-left="378" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.5"><span style="color:#FFFFFF;">rerum facilis</span></div>
				<div class="allinone_contentSlider_text_line textElement21_surprise" data-initial-left="380" data-initial-top="130" data-final-left="55" data-final-top="130" data-duration="0.5" data-fade-start="0" data-delay="0.3"><span style="color:#FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div>
			</div>
			<div id="allinone_contentSlider_photoText3" class="allinone_contentSlider_texts">
				<div  class="allinone_contentSlider_text_line textElement31r_surprise" data-initial-left="80" data-initial-top="20" data-final-left="80" data-final-top="20" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="http://www.sucaihuo.com/js/249.html">Dominate the header!</a></div>
				<div  class="allinone_contentSlider_text_line textElement32r_surprise" data-initial-left="77" data-initial-top="150" data-final-left="77" data-final-top="55" data-duration="0.5" data-fade-start="0.7" data-delay="1.1"><span style="color:#FFFFFF;">Et harum quidem <br />
					rerum facilis</span></div>
				<div  class="allinone_contentSlider_text_line" data-initial-left="580" data-initial-top="0" data-final-left="580" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.0"><img src="images/surprise/gift2.png" width="300" height="357" alt=""/></div>
				<div  class="allinone_contentSlider_text_line" data-initial-left="100" data-initial-top="95" data-final-left="100" data-final-top="95" data-duration="0.5" data-fade-start="0.5" data-delay="0.7"><img src="images/surprise/gift1.png" width="597" height="293" alt=""/></div>
			</div>
			<div id="allinone_contentSlider_photoText6" class="allinone_contentSlider_texts">
				<div id="61" class="allinone_contentSlider_text_line" data-initial-left="280" data-initial-top="-30" data-final-left="280" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0"> <img src="images/surprise/1galaxy_s2.png" width="373" height="384" alt="" /> </div>
				<div id="62" class="allinone_contentSlider_text_line" data-initial-left="45" data-initial-top="50" data-final-left="45" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0"> <img src="images/surprise/2galaxy_s21.png" width="196" height="376" alt="" /> </div>
				<div id="63" class="allinone_contentSlider_text_line" data-initial-left="710" data-initial-top="50" data-final-left="710" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0"> <img src="images/surprise/3galaxy_aceplus.png" width="196" height="376" alt="" /> </div>
				<div id="611" class="allinone_contentSlider_text_line textElement61_surprise" data-initial-left="100" data-initial-top="135" data-final-left="540" data-final-top="135" data-duration="0.5" data-fade-start="0" data-delay="0"> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">Iphone 3GS</a> </div>
				<div id="612" class="allinone_contentSlider_text_line textElement62_surprise" data-initial-left="300" data-initial-top="85" data-final-left="25" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0"> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">galaxy S</a> </div>
				<div id="613" class="allinone_contentSlider_text_line textElement63_surprise" data-initial-left="480" data-initial-top="85" data-final-left="850" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0"> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">Iphone 4S</a> </div>
			</div>
		</div>
	</div>
</div>
<!-- 代码结束 -->









<!-- 以下是统计和广告，与演示无关，不必理会 -->
<p style="margin-top: 50px; text-align: center; color: #f60;">你可以在不同的设备中或改变窗口大小查看本演示</p>
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:50px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>


</body>
</html>